<template>
  <div id="background">
    <div class="content">
      <div class="login-cont">
        <div class="title">莫维春练习系统</div>
        <div class="login-input">
          <p>账号</p>
          <el-input
            class="inptflex"
            v-model="userName"
            placeholder="请输入账号"
            clearable
          />
        </div>
        <div class="login-input">
          <p>密码</p>
          <el-input
            class="inptflex"
            v-model="userPAWD"
            placeholder="请输入密码"
            clearable
            type="password"
            show-password
          />
        </div>
        <!-- 登录与注册切换 -->
        <div class="isLogin">
          <p @click="onUserC" v-if="isLogin ==  '登录' " >注册</p>
          <p @click="onUserC" v-else >登录</p>
        </div>
        <!--按钮显示与隐藏-->
        <el-button
          v-if="isLogin == '登录'"
          type="primary"
          class="login-btn"
          @click="onLogin"
          >登录</el-button
        >
        <el-button v-else type="primary" class="login-btn" @click="onLogin"
          >注册</el-button
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent,ref } from 'vue';
import  {useRouter} from 'vue-router'
import {login} from '@/http/api'
import store from '@/store';

export default defineComponent({
  name: 'APP',
  components: {

  },
  setup(){
    const userName = ref("");
    const userPAWD = ref("");
    const isLogin = ref("登录");
    const router = useRouter();

    const onUserC = () => {
      if (isLogin.value == "登录") {
        isLogin.value = "注册";
      } else {
        isLogin.value = "登录";
      }
    };
    const onLogin = () => {
      let userData = {
        name:userName.value,
      }
      login(userData).then(res => {
          console.log(res);
          store.commit('LOGIN_IN',res.data.token);
          router.push('/home');
      });
      // router.push('/home');
      // if (isLogin.value == "登录") {
      //   alert(userName.value + " 进行登录");
      // } else {
      //   alert(userName.value + " 进行注册");
      // }
    };

    return {
      userName,
      userPAWD,
      isLogin,
      onUserC,
      onLogin,
    }

  }
})
</script>

<style lang="less" scoped>
#background {
  /*根据ID进行组件渲染*/
  background-image: url(../../../public/IMG/background.jpg); /*关联背景图*/
  background-attachment: fixed; /*自适应布局*/
  background-repeat: no-repeat;
  background-size: cover; /*大小全覆盖*/
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  min-height: 100vh;
}
.content {
    /*根据class进行渲染*/
  position: absolute; /*固定位置模式*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /*加上上面2个属性是居中的意思*/
}

.login-cont {
  width: 500px;
  height: 300px;
  background-color: blueviolet;
  opacity: 0.8; /*半透明*/
  border-radius: 20px; /*圆角*/
}
.title {
  text-align: center; /*居中显示*/
  color: #fff; /*字体颜色*/
  font-size: 30px; /*字体大小*/
  padding-top: 30px; /*顶部边距*/
  font-family: Arial, Helvetica, sans-serif; /*字体样式*/
}

.login-input {
  display: flex;
  margin: 0 auto;
  padding-top: 30px;
  width: 400px;
  height: 40px;
  align-items: center;
}
.login-input p {
  /* login-input 类下的 p标签*/
  width: 50px;
  color: #fff; /*字体颜色*/
  font-size: 20px; /*字体大小*/
}
.inptflex {
  flex: 1;
}
.isLogin {
  width: 400px;
  display: flex;
  justify-content: flex-end; /*右对齐*/
  margin: 0 auto;
  padding-top: 10px;
}
.isLogin p {
  cursor: pointer; /**鼠标进入时变成小手*/
}
.login-btn {
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto 0 auto;
  font-size: 16px;
}

</style>